<template>
    <vue-event-calendar
            :events="demoEvents"
            @day-changed="handleDayChanged"
            @month-changed="handleMonthChanged"
    ></vue-event-calendar>
</template>

<script>
  import 'vue-event-calendar/dist/style.css'
  let today = new Date()

  export default {
    name: 'list',
    data: function () {
      return {
        demoEvents: [
          {
            date: `${today.getFullYear()}/${today.getMonth() + 1}/15`,
            title: 'Title-1',
            desc: 'longlonglong description'
          },
          {
            date: `${today.getFullYear()}/${today.getMonth() + 1}/24`,
            title: 'Title-2'
          },
          {
            date: `${today.getFullYear()}/${today.getMonth() === 11 ? 1 : today.getMonth() + 2}/06`,
            title: 'Title-3',
            desc: 'description'
          }
        ]
      }
    },
    methods: {
      handleDayChanged(day) {
        this.$EventCalendar.toDate(day.date)
        console.log(day.date)
      },
      handleMonthChanged(month) {
        console.log(month)
      }
    }
  }
</script>

<style>
    .select-day {
        height: inherit;
        border-radius: 100%;
        border-color: rgb(242, 149, 67);
        background-color: rgb(242, 149, 67);
    }
</style>
